<template>
  <el-row justify="space-around" align="middle" class="total">
    <div class="total-img"></div>
    <div class="total-num">
      {{ provinceName }}活动断层段<span>{{ total }}</span>条
    </div>
  </el-row>
</template>
<script setup>
import { getFaultNumByPro } from '@/api/activeFault'
const route = useRoute()
const { provinceName } = route.query

const total = ref(0)
const getTotal = () => {
  getFaultNumByPro({province: provinceName}).then(res => {
    total.value = res.data
  })
}
onMounted(() => {
  getTotal()
})
</script>
<style scoped lang="scss">
.total {
  color: #fff;
  font-size: 18px;
  margin: 30px 0 20px;

  &-img {
    width: 160px;
    height: 120px;
    background-size: 100% 100%;
    background: url('@/assets/images/activeFault/era.png') no-repeat;
  }

  &-num {
    width: 250px;
    height: 58px;
    line-height: 58px;
    background: linear-gradient(90deg, rgba(181, 211, 255, 0) 0%, #92BEFF 100%);
    border-radius: 0 29px 29px 0;

    span {
      font-size: 36px;
      font-family: DS-Digital-Normal, DS-Digital;
      color: #46FFFF;
      vertical-align: middle;
      padding: 0 5px;
    }
  }
}
</style>